<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '40px',
    }"
  >
    <div class="wrap-other-roll">
      <!-- 基础信息 -->
      <div class="card">
        <div class="title">基础信息</div>
        <el-form :model="form" class="demo-form-inline" size="medium">
          <el-row>
            <el-col :span="10">
              <el-form-item label="接口名称" required>
                <el-input
                  v-model.trim="form.apiName"
                  placeholder="请输入接口名称"
                  maxlength="30"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="10">
              <el-form-item label="接口英文名称" required>
                <el-input
                  v-model.trim="form.method"
                  placeholder="请输入接口英文名称"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="接口分类" required>
                <el-select
                  clearable
                  v-model="form.type"
                  placeholder="请选择接口分类"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in typeData"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="10">
              <el-form-item label="接口地址" required>
                <el-input
                  v-model.trim="form.url"
                  placeholder="请输入接口地址"
                  maxlength="200"
                  resize="none"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="接口描述" required>
                <el-input
                  v-model.trim="form.apiDesc"
                  type="textarea"
                  placeholder="请输入接口描述"
                  maxlength="300"
                  resize="none"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="10"> </el-col>
            <el-col :span="2">&nbsp;</el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 请求头 -->
      <div class="card">
        <div class="title">请求头</div>
        <el-form :model="form" class="demo-form-inline" size="medium">
          <el-row v-for="(head, hIndex) in form.doc.head" :key="hIndex">
            <el-col :span="10">
              <el-form-item label="名称" required>
                <el-input
                  v-model.trim="head.name"
                  placeholder="请输入请求头名称"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="10">
              <el-form-item label="类型" required>
                <el-input
                  v-model.trim="head.contentType"
                  placeholder="请输入请求头类型"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="remove">
              <el-button
                type="danger"
                v-if="hIndex != 0"
                plain
                size="medium"
                @click.prevent="remove('head', head)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 请求参数 -->
      <div class="card">
        <div class="title">
          请求参数
          <el-link
            class="addHandle"
            :underline="false"
            type="primary"
            @click="handle('requestParamters')"
            >添加</el-link
          >
        </div>
        <el-form :model="form" class="demo-form-inline" size="medium">
          <el-row
            style="text-align: center"
            v-if="form.doc.requestParamters.length == 0"
          >
            暂无数据</el-row
          >
          <el-row
            v-else
            v-for="(request, rIndex) in form.doc.requestParamters"
            :key="rIndex"
          >
            <el-col :span="5">
              <el-form-item label="参数名称" required>
                <el-input
                  v-model.trim="request.name"
                  placeholder="请输入参数名称"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="5">
              <el-form-item label="参数类型" required>
                <el-input
                  v-model.trim="request.type"
                  placeholder="请输入参数类型"
                  maxlength="20"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="4">
              <el-form-item label="	是否必填" required>
                <el-select
                  clearable
                  v-model="request.required"
                  placeholder="请选择是否必填"
                  style="width: 100%"
                >
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="5">
              <el-form-item label="	参数说明" required>
                <el-input
                  v-model.trim="request.desc"
                  placeholder="请输入参数说明"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="remove">
              <el-button
                type="danger"
                plain
                size="medium"
                @click.prevent="remove('requestParamters', request)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 响应参数 -->
      <div class="card">
        <div class="title">
          响应参数
          <el-link
            class="addHandle"
            :underline="false"
            type="primary"
            @click="handle('responseParamters')"
            >添加</el-link
          >
        </div>
        <el-form :model="form" class="demo-form-inline" size="medium">
          <el-row
            v-for="(response, index) in form.doc.responseParamters"
            :key="response.key"
          >
            <el-col :span="5">
              <el-form-item label="参数名称" required>
                <el-input
                  v-model.trim="response.name"
                  placeholder="请输入参数名称"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="5">
              <el-form-item label="参数类型" required>
                <el-input
                  v-model.trim="response.type"
                  placeholder="请输入参数类型"
                  maxlength="20"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="5">
              <el-form-item label="	参数说明" required>
                <el-input
                  v-model.trim="response.desc"
                  placeholder="请输入参数说明"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="remove">
              <el-button
                type="danger"
                v-if="index != 0"
                plain
                size="medium"
                @click.prevent="remove('responseParamters', response)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="api-btn">
        <span class="wrap-btn wrap-success" @click="save">提交</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeData: [],
      form: {
        status: 0,
        doc: {
          head: [
            //请求头
            {
              contentType: '',
              name: '',
            },
          ],
          requestParamters: [
            //请求参数
            {
              desc: '',
              name: '',
              required: '',
              type: '',
            },
          ],
          responseParamters: [
            //响应参数
            {
              desc: '',
              name: '',
              type: '',
            },
          ],
        },
      },
    }
  },
  created() {
    this.typeList()
    if (this.$route.query.id) {
      this.itemList()
    }
  },
  methods: {
    itemList() {
      //编辑
      this.$axios
        .get('/admin/apis/find?flag=true&id=' + this.$route.query.id)
        .then((data) => {
          if (data.code == 200) {
            this.form = data.data
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    save() {
      //保存
      if (!this.form.apiName) {
        this.$message.error('请输入接口名称')
        return
      }
      if (!this.form.method) {
        this.$message.error('请输入接口英文名称')
        return
      }
      if (!this.form.type) {
        this.$message.error('请选择接口分类')
        return
      }
      if (!this.form.url) {
        this.$message.error('请输入接口地址')
        return
      }
      if (!this.form.apiDesc) {
        this.$message.error('请输入接口描述')
        return
      }
      //请求头
      const head = this.form.doc.head
      let headFlag = true,
        headError = ''
      for (const key in head) {
        if (!head[key].name) {
          headFlag = false
          headError = '请输入请求头名称'
          break
        } else if (!head[key].contentType) {
          headFlag = false
          headError = '请输入请求头类型'
          break
        }
      }
      if (!headFlag) {
        this.$message.error(headError)
        return
      }
      //请求参数
      const request = this.form.doc.requestParamters
      let requestFlag = true,
        requestError = ''
      for (const key in request) {
        if (!request[key].name) {
          requestFlag = false
          requestError = '请输入请求参数名称'
          break
        } else if (!request[key].type) {
          requestFlag = false
          requestError = '请输入请求参数类型'
          break
        } else if (!request[key].required) {
          requestFlag = false
          requestError = '请选择请求参数是否必填'
          break
        } else if (!request[key].desc) {
          requestFlag = false
          requestError = '请输入请求参数说明'
          break
        }
      }
      if (!requestFlag) {
        this.$message.error(requestError)
        return
      }
      //响应参数
      const response = this.form.doc.responseParamters
      let responseFlag = true,
        responseError = ''
      for (const key in response) {
        if (!response[key].name) {
          responseFlag = false
          responseError = '请输入响应参数名称'
          break
        } else if (!response[key].type) {
          responseFlag = false
          responseError = '请输入响应参数类型'
          break
        } else if (!response[key].desc) {
          responseFlag = false
          error = '请输入响应参数说明'
          break
        }
      }
      if (!responseFlag) {
        this.$message.error(responseError)
        return
      }
      this.$axios.post('/admin/apis/edit', this.form).then((data) => {
        if (data.code == 200) {
          this.$message.success('操作成功！')
          this.$store.dispatch('tags/delVisitedRoute', {
            path: this.$route.path,
          })
          this.$router.push('/interfaceCenter/interface')
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    handle(type) {
      //添加节点
      let obj = {}
      if (type == 'head') {
        obj = {
          contentType: '',
          name: '',
          key: Date.now(),
        }
      }
      if (type == 'requestParamters') {
        obj = {
          desc: '',
          name: '',
          required: '',
          type: '',
          key: Date.now(),
        }
      }
      if (type == 'responseParamters') {
        obj = {
          desc: '',
          name: '',
          type: '',
          key: Date.now(),
        }
      }
      this.form.doc[type].push(obj)
    },
    remove(type, item) {
      //删除节点
      var index = this.form.doc[type].indexOf(item)
      if (index !== -1) {
        this.form.doc[type].splice(index, 1)
      }
    },
    typeList() {
      // 获取接口分类
      this.$axios.get('/admin/dic/listDic?type=api_url').then((data) => {
        this.typeData = []
        if (data.code == 200) {
          this.typeData = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  color: #45ab49;
  border-bottom: 1px solid #45ab49;
  padding: 10px 0;
  margin-bottom: 15px;
}
.addHandle {
  float: right;
}
.remove {
  text-align: end;
  margin-top: 36px;
}
.api-btn {
  text-align: center;
}
</style>
